<template>
	<view class="app">
		<view><u-toast ref="uToast" /></view>
		<view class="tips">
			<view style="color: white; font-size: 32rpx;">应用霸屏管控策略设置</view>
			<view style="color: #cccccc; font-size: 25rpx;">设置后该应用将一直显示在平板首屏且无法退出，最多设置一个已安装应用为霸屏应用</view>
		</view>
		
		<view class="body" @longpress.native="showDel=true">
			<view style="font-weight: bold; font-size: 30rpx; padding-top: 20rpx; padding-bottom: 20rpx;">当前霸屏应用</view>
			<view class="appInfo">
				<view>
					<u-image width="200rpx" height="200rpx" shape="circle" mode="widthFix" :src="app.app_img"></u-image>
					<u-button shape="square"  :custom-style="buttonStyle" type="primary" plain size="medium" @click="show = true">{{settingText}}</u-button>
				</view>
				<view>
					<view style="font-size: 36rpx;">{{app.app_name}}</view>
					<view style="color: #cccccc;">{{app.app_desc}}</view>
					<view style="color: #cccccc;">大小：{{app.app_size}}MB</view>
					<view style="color: #cccccc;">{{app.app_downloads}}次下载</view>
				</view>
			</view>
		</view>
		<view>
			<u-select v-model="show" :list="list" value-name="app_id" label-name="app_name" @confirm="setDominateApp"></u-select>
		</view>
		<view>
			<u-modal v-model="showDel" content="是否确定删除改应用霸屏设置" @confirm="delDominate"></u-modal>
		</view>
	</view>
</template>

<script>
	import {
		queryDominateApp,
		dominateApp,
		getAppInstall,
		delDominateApp,
	} from '@/api/userHome.js'
	export default {
		data() {
			return {
				app: {
					app_id: -1,
					app_img: 'https://jiaoguanyi008.oss-cn-shenzhen.aliyuncs.com/miniPro/images/imgs/noImg.png',
					app_name: '请设置',
					app_size: 0,
					app_desc: '',
					app_downloads: 0,
					setTime:'',
				},
				settingText: "设置",
				show: false,
				showDel: false,
				showNothing: true,
				list: [],
				buttonStyle: {
					color: '#606266',
					width: '200rpx',
					marginTop: '20rpx',
					marginBottom: '20rpx'
				},
			}
		},
		onLoad() {
			this.queryDominateAppControl()
			this.getInstall()
		},
		methods: {
			queryDominateAppControl() {
				queryDominateApp({
					id: uni.getStorageSync("snId"),
					userId: uni.getStorageSync("userId"),
				}).then(res => {
					this.app = res.data
					this.showNothing = false
					this.settingText = "修改"
				}).catch(err => {
					this.app = this.$options.data().app
					this.showNothing = true
					this.settingText = "设置"
				})
			},
			getInstall() {
				getAppInstall({
					id: uni.getStorageSync("snId"),
					userId: uni.getStorageSync("userId"),
					pageSize: 999
				}).then(res => {
					this.list = res.data
				}).catch(err => {
					this.list = []
				})
			},
			setDominateApp(e) {
				let appId = e[0].value
				dominateApp({
					app_id: appId,
					id: uni.getStorageSync("snId"),
					userId: uni.getStorageSync("userId")
				}).then(res => {
					this.queryDominateAppControl()
					this.$refs.uToast.show({
						title: res.msg,
						type: 'success',
						icon: false
					})
				}).catch(err => {
					this.app = this.$options.data().app
					
					this.$refs.uToast.show({
						title: err.msg,
						type: 'error',
						icon: false
					})
				})
			},
			delDominate() {
				if (this.app.app_id == -1) {
					this.$refs.uToast.show({
						title: '暂未配置霸屏应用',
						type: 'info',
						icon: false
					})
					return
				}
				delDominateApp({
					id: uni.getStorageSync("snId"),
					userId: uni.getStorageSync("userId"),
					app_id: this.app.app_id
				}).then(res => {
					this.$refs.uToast.show({
						title: res.msg,
						type: 'success',
						icon: false
					})
					setTimeout(()=>{
						this.queryDominateAppControl()
					}, 500)
				}).catch(err => {
					this.$refs.uToast.show({
						title: err.msg,
						type: 'error',
						icon: false
					})
				})
			}
		}
	}
</script>

<style lang="scss">
		.app {
			.tips {
				    background-color: #4d94ff;
				    border-radius: 35rpx;
				    height: 140rpx;
				    padding-left: 60rpx;
				    padding-top: 13rpx;
					margin-bottom: 20rpx;
			}
			.body {
				background-color: #ffffff;
				border-style: solid;
				border-color: #ffffff;
				border-radius: 20rpx;
			}
			.appInfo {
				background-color: #f2f2f2;
				border-radius: 20rpx;
				display: flex;
				justify-content: space-around;
				align-items: center;
			}
			.custom-style {
					color: #606266;
					width: 200rpx;
					margin-top: 20rpx;
					margin-bottom: 20rpx;
			}
			.noData {
				display: flex;
				justify-content: center;
			}
		}
</style>
